<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>某某人的歌单</title>
    <link rel="stylesheet" href="../CSS/jutigedan.css">
    <script src="../Vuejs文件/vue.js"></script>
    <script src="../axios-master/dist/axios.min.js"></script>
</head>
<body>
    <div class="cover">
        <div class="info">
            <div class="content">
                <img v-bind:src=rdata.coverImgUrl+"?param=240y240" alt="">
            </div>
            <div class="cnt">
                <div class="listname">
                    <p class="listnameSpan">歌单</p>
                </div>
                <div class="tit">
                    <h2>{{rdata.name}}</h2>
                    <!--<a href="#" v-bind:title={{rdata.name}} style="font-size: 22px;font-weight: bold;">{{rdata.name}}</a>-->
                </div>
                <div class="userface">
                    <div class="face">
                        <a href="#">
                        <img v-bind:src=avatarUrl+"?param=80y80" v-bind:title=nickname alt="">
                    </a>
                    </div>
                    <div class="username">
                        <a href="#">
                            <span>{{nickname}}</span>
                        </a>
                    </div>
                    <div class="datetime">
                        <span>{{cdate}}创建 </span>
                    </div>
                </div>
                <div class="jieshao">
                    <span>
                        <b>介绍：</b>
                        {{rdata.description}}
                    </span>
                </div>
            </div>
        </div>
        <div class="playlist">
            <div class="listtit">
                <h3 class="t-sp">
                    <span >歌曲列表</span>
                </h3>
                <p class="t-p">
                    {{len}}首歌
                </p>
            </div>
            <div class="listt">
                <table class="l-table" >
                    <thead>
                        <tr>
                            <th class="w1">
                                <div class="wp">
                                    &nbsp;
                                </div>
                            </th>
                            <th class="w">
                                <div class="wp af0">
                                    歌曲标题
                                </div>
                            </th>
                            <th class="w2">
                                <div class="wp af1">
                                    时长
                                </div>
                            </th>
                            <th class="w3">
                                <div class="wp af2">
                                    歌手
                                </div>
                            </th>
                            <th class="w4">
                                <div class="wp af3">
                                    专辑
                                </div>
                            </th>
                        </tr>
                        <tbody>
                            <tr id="一堆数字" class="even" v-for="(item,i) in temp">
                                <td class="left">
                                    <div class="hd">
                                        <span data-res-id="一堆数字的前几位" class="ply">
                                            &nbsp;
                                        </span>
                                        <span class="num">{{(page-1)*10+i+1}}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="hd1">
                                        <div class="tt" v-bind:id=i onclick="transportGequMsg(id)">
                                            <div class="ttc">
                                                <span class="txt">
                                                    <a href="./jutigequ.html" @click="setSongId(item.id)">
                                                        <b v-bind:title=item.name>{{item.name}}</b>
                                                    </a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="hd2">
                                    <span class="u-dur">
                                        {{parseInt(item.dt/60000)}}:{{parseInt((item.dt/1000)%60)}}
                                    </span>
                                </td>
                                <td class>
                                    <div class="text" title="歌手名">
                                        <span v-bind:title=item.ar[0].name>
                                            <a href="./songerSingle.html" hidefocus="true" @click="toSonger(item.ar[0].id)">
                                                {{item.ar[0].name}}
                                            </a>
                                        </span>
                                    </div>
                                </td>
                                <td class>
                                    <div class="text">
                                        <a href="./zhuanji.html" v-bind:title=item.al.name @click="toAlbum(item.al.id)">
                                            {{item.al.name}}
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </thead>
                </table>
                <ul style="clear: both;text-align: center;">
                    <li style="display: inline-block;">
                        <a class="pagel" href="#none" v-show="page>1" @click="prePage">上一页</a>
                    </li>
                    <li v-for="(item,i) in pageList" style="margin:0 20px; display: inline-block;">
                       <a class="pagel" href="#none"  @click="choicePage(item)" v-bind:class=item==page?"selected":"unselected" v-bind:id=item+"page">
                            {{item}}
                       </a> 
                    </li>
                    <li style="display: inline-block;">
                        <a class="pagel" href="#none" v-show="page<Math.ceil(len/10)" @click="nextPage">下一页</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        function $(id){return document.getElementById(id);}
        function transportGequMsg(i){
            sessionStorage.setItem('chushiGequ',x.temp[i].id);
            var idList = x.rdata.trackIds;
            var useList = new Array();
            var j;
            for(var j = 0;j<idList.length;j++){
                useList.push(idList[j].id);
            }
            sessionStorage.setItem("gequIdList",JSON.stringify(useList));
        }
        var id = sessionStorage.getItem('gedanid');
        // alert(id);
        var x = new Vue({
            el:".cover",
            data:{
                msg:"获取情况",
                rdata:new Object(), //歌单详情api返回的所有参数
                cdate:"123",    //歌单创建日期
                temp:[] ,//当前页面显示的歌曲数组
                musicListByPage:[],   //歌曲队列,按页分
                len:0,  //歌单歌曲数目
                pageList:[], //页标
                page:1, //当前选中的页标
                num:10,  //一页的歌曲数量
                avatarUrl:"",
                nickname:""
            },
            methods:{
                setSongId:function(id){
                    sessionStorage.setItem("songId",id);
                },
                get:function(){
                    var t = this;
                    /*
                        接口地址：/playlist/detail
                        例子：/playlist/detail?id=24381616
                        参数：
                            必选参数 : iid : 歌单 id
                            可选参数 : s : 歌单最近的 s 个收藏者,默认为8
                    */
                    axios.get(
                        "https://autumnfish.cn/playlist/detail?id="+id
                        ).then(function(response){
                            t.rdata = response.data.playlist;
                            var d = new Date(t.rdata.createTime);
                            t.cdate = d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日";
                            t.temp = t.rdata.tracks;
                            t.musicListByPage[0] = t.rdata.tracks;
                            t.len = t.rdata.trackIds.length;
                            for(var i = 1;i<=Math.ceil(t.len/10) && i<=10;i++){
                                t.pageList.push(i);
                            }
                            t.avatarUrl = t.rdata.creator.avatarUrl;
                            t.nickname = t.rdata.creator.nickname;
                            console.log(t.rdata);
                    },function (err){
                            t.msg1 = "获取失败";
                    })
                },
                get2:function(){
                    var t = this;
                    var idl = "";
                    var l = this.rdata.trackIds;
                    for(var i = (this.page-1)*10;i<this.len && i<this.page*10;i++){
                        idl += l[i].id;
                        if(i+1==this.len||i+1==this.page*10){
                            break;
                        }
                        idl+=",";
                    }
                    if(idl!=""){
                        axios.get(
                            "https://autumnfish.cn/song/detail?ids="+idl
                        ).then(
                            function(response){
                                var r = response.data;
                                console.dir(r.songs);
                                t.temp = r.songs;
                                t.musicListByPage[t.page-1] = r.songs;
                            },
                            function(err){
                                console.log("获取2失败");
                                console.log(err);
                            }
                        )
                    }
                },
                choicePage:function(pageNum){
                    this.page = pageNum;
                    if(this.musicListByPage[pageNum-1]==null){
                        this.get2();
                    }
                    this.temp = this.musicListByPage[pageNum-1];
                },
                prePage:function(){
                    if(this.page>1){
                        if(this.page-1<this.pageList[0]){
                            if(this.page-5>0){
                                
                                this.choicePage(--this.page);
                                this.changePageList(-5);
                            }else{
                               
                                this.choicePage(--this.page);
                                this.changePageList(-this.page);
                            }
                        }else{
                            this.choicePage(--this.page);
                        }
                    }
                },
                nextPage:function(){
                    if(this.page<Math.ceil(this.len/10)){
                        if(this.page+1>this.pageList[this.pageList.length-1]){
                            if(this.page+5<Math.ceil(this.len/10)){
                               
                                this.choicePage(++this.page);
                                this.changePageList(5);
                            }else{
                                console.log(this.page-(Math.ceil(this.len/10)-this.page+1));
                                
                                this.choicePage(++this.page);
                                this.changePageList(Math.ceil(this.len/10)-this.page+1);
                            }
                        }else{
                            this.choicePage(++this.page);
                        }
                    }
                },
                changePageList:function(num){
                    for(var i = 0;i<this.pageList.length;i++){
                        this.pageList[i]+=num;
                    }
                },
                toAlbum:function(albumId){
                    sessionStorage.setItem("albumId",albumId);
                },
                toSonger:function(songerId){
                    sessionStorage.setItem("songerId",songerId);
                }
            }
        })
        x.get();
    </script>
</body>
</html>